<template>
<el-card style="height: 40%;width: 100%">
  <div>
    <!-- 社交主页 -->
    <div class="warp__2BP03">
      <div class="warp__1CDpL">
         <div class="warp_l__34yS8">
          ♊&nbsp;&nbsp;<span class="work__00001">社交主页</span>
        </div>
        <div class="warp_r__1-t6m">
          <img class="icon_style__xOInT" alt="" src="">
          <span @click="addJobExpectations">添加</span>
        </div>
      </div>
    </div>
    <br><br>
    <div style="  height: 230px;background: #F2F6FC;padding-top: 20px;" v-show="open=='2'" >
      <div style="width: 180px; height: 35px;"><div style="padding-left: 35px;"><font color="green" style="font-size:15px;">添加社交主页</font></div></div>
      <div style="padding-left: 35px;"><el-input placeholder="请输入内容" style="width:650px" v-model="social.httpUrl">
        <template slot="prepend">Http://</template>
      </el-input>
      </div>
      <div style="padding-top: 20px;">
      <div style="padding-left: 35px;padding-bottom:10px">
        <div style="padding-bottom:10px"><font style="color: #ccc;font-size:15px">添加能突出你个人事例的主页，如：</font></div>
        <div v-if="social.home=='QQ'" style="width:35px;height:35px;border:2px Cyan solid;float:left;border-right:2px Cyan solid;border-bottom:2px Cyan solid;border-radius:50%;">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center2" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210720092003.png"/>
        </div>
        <div v-if="social.home!='QQ'" style="width:35px;height:35px;float:left;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center2" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210720092003.png"/>
        </div>
        <div v-if="social.home=='CSON'" style="width:35px;height:35px;border:2px Cyan solid;float:left;border-right:2px Cyan solid;border-bottom:2px Cyan solid;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center3" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719212839.png"/>
        </div>
        <div v-if="social.home!='CSON'" style="width:35px;height:35px;float:left;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center3" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719212839.png"/>
        </div>
        <div v-if="social.home=='微博'" style="width:35px;height:35px;border:2px Cyan solid;float:left;border-right:2px Cyan solid;border-bottom:2px Cyan solid;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center4" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719212909.png"/>
        </div>
        <div v-if="social.home!='微博'" style="width:35px;height:35px;float:left;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center4" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719212909.png"/>
        </div>
        <div v-if="social.home=='微信'" style="width:35px;height:35px;border:2px Cyan solid;float:left;border-right:2px Cyan solid;border-bottom:2px Cyan solid;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center5" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719213022.png"/>
        </div>
        <div v-if="social.home!='微信'" style="width:35px;height:35px;float:left;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center5" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719213022.png"/>
        </div>
        </div>
      </div>
      <div style="padding-left: 35px;padding-top:35px"><el-button type="success" @click="addsocial">完成</el-button>    <a @click="open=1">取消</a></div>
    </div>
    <!-- 回显 -->
    <div style="  height: 230px;background: #F2F6FC;padding-top: 20px;" v-show="updateopen=='2'" >
      <div style="width: 180px; height: 35px;"><div style="padding-left: 35px;"><font color="green" style="font-size:15px;">添加社交主页</font></div></div>
      <div style="padding-left: 35px;"><el-input placeholder="请输入内容" style="width:650px" v-model="updatesocial.httpUrl">
        <template slot="prepend">Http://</template>
      </el-input>
      </div>
      <div style="padding-top: 20px;">
      <div style="padding-left: 35px;">
        <div style="padding-bottom:10px"><font style="color: #ccc;font-size:15px">添加能突出你个人事例的主页，如：</font></div>
        <div v-if="updatesocial.home=='QQ'" style="width:35px;height:35px;border:2px Cyan solid;float:left;border-right:2px Cyan solid;border-bottom:2px Cyan solid;border-radius:50%;">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center6" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210720092003.png"/>
        </div>
        <div v-if="updatesocial.home!='QQ'" style="width:35px;height:35px;float:left;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center6" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210720092003.png"/>
        </div>
        <div v-if="updatesocial.home=='CSON'" style="width:35px;height:35px;border:2px Cyan solid;float:left;border-right:2px Cyan solid;border-bottom:2px Cyan solid;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center7" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719212839.png"/>
        </div>
        <div v-if="updatesocial.home!='CSON'" style="width:35px;height:35px;float:left;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center7" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719212839.png"/>
        </div>
        <div v-if="updatesocial.home=='微博'" style="width:35px;height:35px;border:2px Cyan solid;float:left;border-right:2px Cyan solid;border-bottom:2px Cyan solid;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center8" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719212909.png"/>
        </div>
        <div v-if="updatesocial.home!='微博'" style="width:35px;height:35px;float:left;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center8" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719212909.png"/>
        </div>
        <div v-if="updatesocial.home=='微信'" style="width:35px;height:35px;border:2px Cyan solid;float:left;border-right:2px Cyan solid;border-bottom:2px Cyan solid;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center9" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719213022.png"/>
        </div>
        <div v-if="updatesocial.home!='微信'" style="width:35px;height:35px;float:left;border-radius:50%">
        <img style="width:30px;height:30px;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;float:middle" @click="center9" src="http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210719213022.png"/>
        </div>
      </div>
      </div>
      <div style="padding-left: 35px;padding-top:35px"><el-button type="success" @click="updatesocialonsubmit">完成</el-button>    <a @click="updateopen=1,updatesocial={}">取消</a></div>
    </div>
    <div v-if="socialList!=null">
      <ol >
        <li v-for="(item,index) in socialList" :key="index" v-if="item.id!=updatesocial.id" style="list-style-type: disc;list-style-image: url(http://pinxixi-1811a.oss-cn-beijing.aliyuncs.com/QQ图片20210716093155.png);">
        {{item.home}}:<a style="font-size:15px;" :href="item.httpUrl">{{item.httpUrl}}</a>
          <a style="margin-right: 50px;float: right;">
            <img style="width: 20px; height: 20px" @click="delsocial(item.id)" class="icon_d__8fzmg" alt="" src="">
          </a>
          <a style="margin-right: 50px;float: right;">
            <img style="width: 20px; height: 20px" @click="updatesocialopen(item.id)" class="icon_e__36ON5" alt="" src="">
          </a>
        </li>
      </ol>
    </div>
    
  </div>
 </el-card>
</template>

<script>
import ueditor from 'ueditor'
export default {
  inject:['reload'],
  data(){
    return{
      open:1,
      social:{
        home:"",
        httpUrl:null
      },
      updatesocial:{
        home:"",
      },
      socialList:[],
      updateopen:1,
      user:{},
      resume:{}
      
    }
  },
  methods:{
    center2(){
      this.social.home = "QQ";
    },
    center3(){
      this.social.home = "CSON";
    },
    center4(){
      this.social.home = "微博";
    },
    center5(){
      this.social.home = "微信";
    },
    center6(){
      this.updatesocial.home = "QQ";
    },
    center7(){
      this.updatesocial.home = "CSON";
    },
    center8(){
      this.updatesocial.home = "微博";
    },
    center9(){
      this.updatesocial.home = "微信";
    },
    addJobExpectations(){
      if(this.updateopen==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.open = 2;
          this.updateopen=1;
        }).catch(() => {
        });
      }
      this.updatesocial = {};
      this.open = 2;
    },
    addsocial(){
      this.$http({
              url: this.$http.adornUrl("/resume/social/save/"),
              method: 'post',
              data: this.$http.adornData({
                'httpUrl': this.social.httpUrl,
                'resumeId': this.resume.id,
                'home':this.social.home,
              })
            }).then(({data}) => {
            })
    this.reload();
      this.open =1;
    },
    updatesocialonsubmit(){
      this.$http({
              url: this.$http.adornUrl("/resume/social/update/"),
              method: 'post',
              data: this.$http.adornData({
                'id': this.updatesocial.id,
                'httpUrl': this.updatesocial.httpUrl,
                'home':this.updatesocial.home,
                'resumeId': this.resume.id,
              })
            }).then(({data}) => {
              this.updateopen = 1;
             this.reload();
              this.updatesocial={};
            })
    },
    findByresumeId(){
      //this.user = JSON.parse(localStorage.getItem('user'));
        this.resume= JSON.parse(localStorage.getItem("resume"));
      this.$http({
              url: this.$http.adornUrl(`/resume/social/findByresumeId/${this.resume.id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
             if(data.socialList!=''){
              this.socialList = data.socialList;
                this.$emit('resumTest')
               }
            });
    },
    delsocial(id){
      this.$http({
              url: this.$http.adornUrl(`/resume/social/deleteById/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
            })
      this.reload();
    },
    updatesocialopen(id){
      if(this.open==2){
         this.$confirm('离开修改内容将不会保存', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.open = 1;
          this.updateopen=2;
        }).catch(() => {
        });
      }
      this.$http({
              url: this.$http.adornUrl(`/resume/social/info/${id}`),
              method: 'get',
              data: this.$http.adornData()
            }).then(({data}) => {
              this.updatesocial = data.social;
            })
      this.updateopen = 2;
    },
  },
  mounted(){
    this.findByresumeId();
  }
}
</script>




<style lang="scss">
  .mod-demo-ueditor {
    position: relative;
    z-index: 510;
    > .el-alert {
      margin-bottom: 10px;
    }
  }
  .mod-home {
    line-height: 1.5;
  }
  .warp__1CDpL .warp_r__1-t6m .icon_style__xOInT {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
  }

  .warp__1CDpL .warp_l__34yS8 {
    float: left;
  }

  .warp__1CDpL .warp_r__1-t6m {
    margin-right: 50px;
    float: right;
    font-size: 14px;
    font-weight: 400;
    color: #02B28A;
    line-height: 28px;
    cursor: pointer;
  }

  .a1{
    border-left: 3px solid #00B38A;
    height: 16px;
    position: absolute;
    top: 24px;
    left: 30px;
  }

  .work__00001{
    font-size: 20px;
    font-weight: 600;
    color: #040404;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

